<template>
  <div class="total-container">
    <div class="top-box">
      <div class="left-container">{{ topData.lb }}</div>
      <div class="right-container">
        <div v-if="!!topData.sz" class="num">
          <CountTo :startVal="0" :endVal="+topData.sz" :duration="1200" separator=""></CountTo>
        </div>
        <div class="unit">{{ topData.unit }}</div>
      </div>
    </div>
    <div v-if="chartData.data.length" class="bottom-box">
      <div class="chart-container">
        <pieChart :chart-data="chartData"></pieChart>
      </div>
      <div class="legend">
        <div
          class="legend-item"
          v-for="(item, index) in chartData.data"
          :key="index"
        >
          <div
            style="display: flex; justify-content: center; align-items: center;"
          >
            <div
              class="color-bar"
              :style="{ backgroundColor: chartData.colors[index] }"
            ></div>
            <div class="title">{{ item.name }}</div>
          </div>
          <div class="right-container">
            <div class="mask"></div>
            <div class="num">
              <CountTo :startVal="0" :endVal="item.value" :duration="1200" separator=""></CountTo></div>
            <div class="unit">{{ chartData.unit }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pieChart from '../charts/pieChart.vue'
import { getLbData, getXjfdmslxs } from '@/api/cultureTuorism'
import CountTo from 'vue-count-to'
export default {
  name: 'starRatedHotels',
  data() {
    return {
      topData: {},
      chartData: {
        data: [],
        unit: '',
        title1: '共',
        title2: '239',
        title3: '家',
        colors: ['#79D9F9', '#F4EEB7', '#78FFC1', '#FABE00']
      }
    }
  },
  components: {
    pieChart,
    CountTo
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const [res, chartRes] = await Promise.all([
        getLbData('全市星级饭店'),
        getXjfdmslxs('全市星级饭店')
      ])
      this.topData = res.result[0]
      this.chartData.data = chartRes.result.map((item) => {
        return {
          name: item.xj,
          value: +item.sl
        }
      })
      this.chartData.unit = chartRes.result[0].dw
    }
  }
}
</script>
<style lang="scss" scoped>
.total-container {
  .top-box {
    width: 408px;
    height: 47px;
    background: url('../../../img/left-row1-icon1.png') no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    .left-container {
      height: 100%;
      font-family: MicrosoftYaHeiUI;
      font-size: 16px;
      color: #ffffff;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .right-container {
      height: 100%;
      display: flex;
      justify-content: end;
      align-items: center;
      .num {
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #16fdf5;
        line-height: 24px;
        text-align: right;
        font-style: normal;
        text-transform: none;
      }
      .unit {
        font-family: MicrosoftYaHeiUI;
        font-size: 14px;
        color: #fefefe;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-left: 4px;
      }
    }
  }
  .bottom-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 151px;
    width: 100%;
    .chart-container {
      height: 100%;
      width: 40%;
      margin-top: 20px;
      position: relative;
    }
    .chart-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 6px;
      width: 152px;
      height: 152px;
      background: url('../../../img/pie-bg.png') no-repeat center center;
      background-size: 100% 100%;
      animation: rotate 5s linear infinite;
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .legend {
      height: 100%;
      width: 50%;
      .legend-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 28px;
        margin-top: 10px;
        .color-bar {
          width: 4px;
          height: 20px;
          background: #79d9f9;
          border-radius: 2px 2px 2px 2px;
        }
        .title {
          font-family: MicrosoftYaHeiUI;
          font-size: 14px;
          color: #ffffff;
          line-height: 14px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-left: 10px;
        }
        .right-container {
          width: 100px;
          height: 28px;
          background: rgba(29, 66, 118, 0.3);
          border-radius: 6px 6px 6px 6px;
          display: flex;
          justify-content: center;
          align-items: baseline;
          padding-top: 3px;
          z-index: 2;
          position: relative;
          .num {
            font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
            font-weight: bold;
            font-size: 20px;
            color: #ffde00;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          .unit {
            font-family: MicrosoftYaHeiUI;
            font-size: 14px;
            color: #ffffff;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 4px;
          }
        }
      }
    }
  }
}
</style>
